<template>
	<div ref="mEchartsRef" :style="{height:height, width:width}"></div>
</template>

<script lang="ts" setup>
import {ref, nextTick, watch, computed, onMounted} from 'vue'
import * as echarts from 'echarts'
import T from './echarts-theme-T.js'
echarts.registerTheme('T', T)
const unwarp = (obj: any) => obj && (obj.__v_raw || obj.valueOf() || obj)

const props = defineProps({
	height: { type: String, default: "100%" },
	width: { type: String, default: "100%" },
	nodata: {type: Boolean, default: false },
	option: { type: Object, default: () => {} }
})

const isActivat = ref(false)
const myChart = ref(null)

const mEchartsRef = ref()

watch(() => props.option, (v) => {
	unwarp(myChart.value).setOption(v)
}, {deep:true})

computed(() => {
	return props.option || {}
})

onMounted(() => {
	isActivat.value = true
	nextTick(() => {
		draw()
	})
})

const draw = () => {
	var cusChart = echarts.init(mEchartsRef.value, 'T');
	cusChart.setOption(props.option)
	Object.assign(myChart, {cusChart})
	window.addEventListener('resize', () => cusChart.resize())
}

</script>
